<template>
  <div class="selectCate">
    <el-select
      v-model="getCate"
      placeholder="请选择类别"
      @change="$emit(&quot;input&quot;, $event)"
    >
      <el-option
        v-for="item in cates"
        :key="item._id"
        :label="item.cate_zh"
        :value="item.cate"
      />
    </el-select>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SelectCate',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cate: this.value
    }
  },
  computed: {
    ...mapGetters(['cates']),
    getCate: {
      get() {
        return this.cate || this.value
      },
      set(val) {
        this.cate = val
      }
    }
  },
  watch: {
    cate() {
      this.$emit('change')
    }
  },
  watch: {
    cate() {
      this.$emit('change', this.cate)
    }
  },
  created() {
    this.$store.dispatch('goods/ASYNC_CATE')
  }

}
</script>

<style>
  .selectCate {
    display: inline-block;
    margin-left: 2rem;
  }
</style>
